/* eslint-disable no-console */
import { useState } from "react";
import { proxy, useSnapshot } from "valtio";

class Obj {
    value = '';
    setValue(value: string) {
        this.value = value;
    }
}

const obj = proxy(new Obj);
const Test = () => {
    const [value, setValue] = useState('');
    const snap = useSnapshot(obj, { sync: true });

    console.log('render', snap.value, value);
    return <div>
      <div>
        valtio:
        <input value={snap.value && obj.value} onChange={(e) => {
                obj.setValue(e.target.value);
            }}
        />
      </div>
      <div>
        state:
        <input value={value} onChange={(e) => {
                setValue(e.target.value);
            }}
        />
      </div>
    </div>;

};

export default Test;